import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { Icon, TabBar, Tools } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';
import { TitleUtil } from '../../util';
const getLabel = Tools.getLabel;
const store=[
  'mainStore',
  'centerStore',
]

@withRouter
@inject(...store)
@observer
export default class Main extends React.Component {
  static defaultProps = {
    prefixCls: 'cowork',
  }
  
  componentDidMount() {
    const { centerStore: { getCoworkCounts } } = this.props;
    getCoworkCounts();
    TitleUtil.setTitle(getLabel('17855','协作'));
  }

  componentWillUnmount() {
    TitleUtil.resetEmElement();
  }

  render() {
    const { prefixCls, location: { pathname }, mainStore: { getKey, visible }, centerStore: { coworkCounts } } = this.props;
    const activeKey = getKey(pathname);
    return (
      <div className="cowork">
        <TabBar
          hidden={activeKey==='detail' ? true: visible}
          barTintColor='white'
          tabBarPosition='bottom'
          prerenderingSiblingsNumber={0}
        >
          <TabBar.Item
            title={<span className={activeKey === 'communication' ? 'cowork-tab-tintColor' : ''}>{getLabel(32571, '协作交流')}</span>}
            key='communication'
            icon={<Icon type='cooperation-exchange'/>}
            selectedIcon={<Icon type='cooperation-exchange-hot'/>}
            selected={activeKey === 'communication'}
            onPress={() => this.props.history.push('/communication')}
          />
          <TabBar.Item
            title={<span className={activeKey === 'approval' ? 'cowork-tab-tintColor' : ''}>{getLabel(32573, '协作审批')}</span>}
            key='approval'
            icon={<Icon type='collaboration-approval-unselected'/>}
            selectedIcon={<Icon type='collaboration-approval-selected'/>}
            selected={activeKey === 'approval'}
            onPress={() => this.props.history.push('/approval')}
          />
          <TabBar.Item
            title={<span className={activeKey === 'apply' ? 'cowork-tab-tintColor' : ''}>{getLabel(33842, '协作申请')}</span>}
            key='apply'
            icon={<Icon type='collaboration-application-unselected'/>}
            selectedIcon={<Icon type='collaboration-application-selected'/>}
            selected={activeKey === 'apply'}
            onPress={() => this.props.history.push('/apply')}
          />
          <TabBar.Item
            title={<span className={activeKey === 'center' ? 'cowork-tab-tintColor' : ''}>{getLabel(390689, '个人中心')}</span>}
            key='center'
            icon={<Icon type='unselected'/>}
            selectedIcon={<Icon type='selected'/>}
            selected={activeKey === 'center'}
            badge={coworkCounts && toJS(coworkCounts).relateCount}
            onPress={() => this.props.history.push('/center')}
          />
        </TabBar>
        <div className={`${prefixCls}-container ${activeKey==='detail' && 'cowork-detail-spaPage'}`}>
          {this.props.children}
        </div>
      </div>
    )
  }
}